<template>
  <div id="app">
    <h1>待办事项列表</h1>
    <TodoInput @add-todo="handleAddTodo" />
    <TodoList :todos="todos" @delete-todo="handleDeleteTodo" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TodoInput from './TodoInput.vue';
import TodoList from './TodoList.vue';

const todos = ref([
  { id: 1, text: '学习 Vue 3', completed: false },
  { id: 2, text: '完成作业', completed: false }
]);

const handleAddTodo = (newTodo) => {
  const newId = todos.value.length > 0 ? todos.value[todos.value.length - 1].id + 1 : 1;
  todos.value.push({ id: newId, text: newTodo, completed: false });
};

const handleDeleteTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id!== id);
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}
</style>